/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, TextInput} from 'react-native';
import { Tabs, Button,Toast,Badge, DatePicker, List, Icon  } from 'antd-mobile-rn';
import SplashScreen from 'react-native-splash-screen';


// project
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';

import Licon from '../../../library/comp/project/icon';




/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class ServiceVisitor extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);
		// this.Nav = this.props.navigation;

		/**
		 * state
		 */
		this.state = {
			// 页面tab切换
			tabs:[
				{title:'小区门禁'},
				{title:'访客车辆'}
			],

			//过期时间
			timeout:null,
			//使用次数
			usecount:null,
			//使用码
			usecode:null,
			//房屋信息
			myhouse:{
				set_name:"保定珑城花园小区"
			},

		}
	}
	
    /**
     * didMount
     */
    componentDidMount(){
        // SplashScreen.hide();
        // HttpTemp.get({
        //     url:"CPage/location/subdistrict.php",
        //     success:(res) => {
        //         let data = res.data;
        //         this.setState({
		// 			myhouse:data
        //         })
        //     }
        // })

    }


	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	/**
	 * 访客通行信息填写完成后的提交操作
	 */
	getusecode = ()=>{

		let timechuo = 0;
		if(this.state.timeout == null){
			Toast.info('请选择过期时间',1);
			return;
		}else{
			timechuo = new Date(this.state.timeout).getTime()/1000
		}
		if(this.state.usecount == null){
			Toast.info('请填写使用次数',1)
			return;
		}
		
        // HttpTemp.post({
		// 	url:"/CPage/guest/logic/gencode.php",
		// 	data:{
		// 		set_use_times:parseInt(this.state.usecount),
		// 		time_over:timechuo,
		// 	},
        //     success:(res) => {
		// 		if(res.code == 0){
		// 			let data = res.data;
		// 			this.setState({
		// 				usecode:data.set_code
		// 			})
		// 			Toast.info('使用码已生成', 1)
	
		// 		}else{
		// 			Toast.info(res.msg, 1)

		// 		}

        //     }
        // })


	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {

		var myDate = new Date();

		const style = {
			borderBottomColor:'#26c75e',
			borderBottomWidth:3,
			width: 20
		}
		return (
			<CPage>
				{/* 内容部分 */}
				<CContent mt='80' bg='#efeff4'>

				   <View style={{
						paddingTop: 10,
						paddingBottom: 20,
						paddingLeft: 10,
						paddingRight: 10,
						backgroundColor: '#fff',
						marginTop: 20,
						marginLeft: 15,
						marginRight: 15,
						borderRadius: 4
					}}>

						{/* 右侧tab菜单 */}
						<View style={{flex:1}}>

							<Tabs 
								style={{ zIndex:100 }}
								tabs={this.state.tabs} 
								tabBarUnderlineStyle={style} 
								tabBarActiveTextColor='#26c75e' 
								tabBarTextStyle={{ size:16 }}

							>

				   					{/* 小区门禁 */}
									<View style={{marginLeft:20,marginRight:20,marginTop:30,borderRadius:5}}>
				   						<View style={{padding:10,backgroundColor:'#fff'}}>

										   {/* 选择小区 */}
											<CRow h='80' y='center' bb='2 #efefef' pb='16'>
												<CHand f='2'>
													<CIcon width="24" height="24" color="#999" icon={ Licon["index-location"] }></CIcon>
													<CText size="32"> {this.state.myhouse.set_name}</CText>
												</CHand>
											</CRow>

											{/* 选择当日有效期 */}

											<List style={{}}>

												<DatePicker
													onChange={(val) => {
														this.setState({
															timeout:val
														})
													}}
													value={ this.state.timeout }
													mode="datetime"
													minDate={new Date()}
													maxDate={new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate(), 24)}
													style={{
														fontSize: 12
													}}
												>
													<List.Item arCRow="horizontal" style={{ marginLeft:-15  }}>
														<CText  size="32">过期时间</CText>
													</List.Item>
												</DatePicker>
											</List>


											{/* 输入使用码次数 */}
											<CRow bb='2 #efefef' h='80' y='center'>
                                                <CText color="#666" mr='20' size="32">使用次数:</CText>
												<TextInput 
													onChangeText={(val) => {
														this.setState({
															usecount:val
														})
													}}
													defaultValue={this.state.usecount}
													keyboardType="numeric"
													placeholder='请输入使用码' 
													underlineColorAndroid='transparent' 
													style={{width:150, fontSize:14, top:2}}
													placeholderTextColor="#c9c9c9"
												></TextInput>
                                            </CRow>

											{/* 填写使用码 */}
                                            <CRow h='80' y='center'>
                                                <CText color="#666" mr='20' size="32">使用码:</CText>
												<TextInput 
													value={this.state.usecode}
													editable={false}
													underlineColorAndroid='transparent' 
													style={{width:150, fontSize:14, top:2, color:"black"}}
													placeholderTextColor="#c9c9c9"
												></TextInput>
                                            </CRow>

										</View>

										{/* 一键开门按钮 */}
										<View style={{ marginTop:10 }}>
											<CHand  bg='#21ac43' ra='10' h='90' onClick={this.open} x="center" y="center"><CText size="32" bold color='#fff'>申请密码</CText></CHand>
										</View>

									</View>

									{/* 楼宇门 */}
									<CHand x='center' mt='40'><CText color='#666'>暂未开启此功能</CText></CHand>
							</Tabs>
						</View>

				   </View>

				</CContent>
				
                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <CBetween px='20'>
                        <CHand onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>访客通行</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}

			</CPage>
		);
	}
}
